<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>首页</title>
		<script src="js/mui.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="./fonts/iconfont.css">
		<style>
			html,
			body {
				background-color: #ffffff;
				padding:0 0.5rem;
			}
			.img-dom{
				width: 100vw;
				height:25vw ;
				background-image: url(../images/progress.gif);
				background-size: 100% 100%; /* 铺满元素 */
				background-repeat: no-repeat; /* 确保不重复 */
			}
			.desc-text {
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
				padding-bottom: 51px;
			}
			@font-face {
			  font-family: 'iconfont';
			  src: url('./fonts/iconfont.woff2?t=1725333087397') format('woff2'),
			       url('./fonts/iconfont.woff?t=1725333087397') format('woff'),
			       url('./fonts/iconfont.ttf?t=1725333087397') format('truetype');
			}
			.iconfont {
			  font-family: "iconfont" !important;
			  font-size: 16px;
			  font-style: normal;
			  -webkit-font-smoothing: antialiased;
			  -moz-osx-font-smoothing: grayscale;
			}
		</style>
	</head>

	<body>
		
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-input-row mui-search" style="width:80vw;margin:0.3rem 10vw 0.8rem 10vw;height:2rem;">
				<input type="search" class="mui-input-clear" placeholder="搜索歌曲" style="border-radius: 16px;" >
			</div>
			<div style="padding: 0 0.5rem;  letter-spacing: 2px;">
				<p style="height: 2rem;display: flex;align-items: center;font-size: 1rem;font-weight: 600;color: #000;">
					<span class="iconfont icon-bofang" style="color: rgb(6,162,255);font-size: 2rem;"></span>
					<span>播放全部</span>
					<span style="color:#999;font-size: 0.7rem;">(775)</span>
				</p>

			</div>
			<div class="mui-scroll">
				<ul class="mui-table-view mui-table-view-chevron">
				</ul>
			</div>
		</div>
		<script src="js/util.js"></script>
		<script type="text/javascript">
			(function() {
				mui.init({
					swipeBack: true //启用右滑关闭功能
				});
				mui.plusReady(function() {
					getData()
				 	addDataEventListen()
					var self = plus.webview.currentWebview(),
					leftPos = Math.ceil((window.innerWidth - 60) / 2); // 设置凸起大图标为水平居中

					/**	
					 * drawNativeIcon 绘制带边框的半圆，
					 * 实现原理：
					 *   id为bg的tag 创建带边框的圆
					 *   id为bg2的tag 创建白色矩形遮住圆下半部分，只显示凸起带边框部分
					 * 	 id为iconBg的红色背景图
					 *   id为icon的字体图标
					 *   注意创建先后顺序，创建越晚的层级越高
					 */
					var drawNativeIcon = util.drawNative('icon', {
						bottom: '5px',
						left: leftPos + 'px',
						width: '60px',
						height: '60px'
					}, [{
						tag: 'rect',
						id: 'bg',
						position: {
							top: '1px',
							left: '0px',
							width: '100%',
							height: '100%'
						},
						rectStyles: {
							color: '#fff',
							radius: '50%',
							borderColor: '#ccc',
							borderWidth: '1px'
						}
					}, {
						tag: 'rect',
						id: 'bg2',
						position: {
							bottom: '-0.5px',
							left: '0px',
							width: '100%',
							height: '45px'
						},
						rectStyles: {
							color: '#fff'
						}
					}, {
						tag: 'rect',
						id: 'iconBg',
						position: {
							top: '5px',
							left: '5px',
							width: '50px',
							height: '50px'
						},
						rectStyles: {
							color: '#d74b28',
							radius: '50%'
						}
					}, {
						tag: 'font',
						id: 'icon',
						text: '\ue600', //此为字体图标Unicode码'\e600'转换为'\ue600'
						position: {
							top: '0px',
							left: '5px',
							width: '50px',
							height: '100%'
						},
						textStyles: {
							fontSrc: '_www/fonts/iconfont.ttf',
							align: 'center',
							color: '#fff',
							size: '30px'
						}
					}]);
					// append 到父webview中
					self.append(drawNativeIcon);

					//自定义监听图标点击事件
					var active_color = '#fff';
					drawNativeIcon.addEventListener('click', function(e) {
						mui.alert('你点击了图标，你在此可以打开摄像头或者新窗口等自定义点击事件。', '悬浮球点击事件');
						// 重绘字体颜色
						if(active_color == '#fff') {
							drawNativeIcon.drawText('\ue600', {}, {
								fontSrc: '_www/fonts/iconfont.ttf',
								align: 'center',
								color: '#000',
								size: '30px'
							}, 'icon');
							active_color = '#000';
						} else {
							drawNativeIcon.drawText('\ue600', {}, {
								fontSrc: '_www/fonts/iconfont.ttf',
								align: 'center',
								color: '#fff',
								size: '30px'
							}, 'icon');
							active_color = '#fff';
						}

					});
					// 中间凸起图标绘制及监听点击完毕

					// 创建子webview窗口 并初始化
					var aniShow = {};
					util.initSubpage(aniShow);
					
					var 	nview = plus.nativeObj.View.getViewById('tabBar'),
						activePage = plus.webview.currentWebview(),
						targetPage,
						subpages = util.options.subpages,
						pageW = window.innerWidth,
						currIndex = 0;
					
						
					/**
					 * 根据判断view控件点击位置判断切换的tab
					 */
					nview.addEventListener('click', function(e) {
						var clientX = e.clientX;
						if(clientX > 0 && clientX <= parseInt(pageW * 0.4)) {
							currIndex = 0;
						} else if(clientX > parseInt(pageW * 0.6) && clientX <= parseInt(pageW * 1)) {
							currIndex = 1;
						}
						// 匹配对应tab窗口	
						if(currIndex > 0) {
							targetPage = plus.webview.getWebviewById(subpages[currIndex - 1]);
						} else {
							targetPage = plus.webview.currentWebview();
						}
						if(targetPage == activePage) {
							return;
						}

						if(currIndex !== 2) { 
							//底部选项卡切换
							util.toggleNview(currIndex);
							// 子页面切换
							util.changeSubpage(targetPage, activePage, aniShow);
							//更新当前活跃的页面
							activePage = targetPage;
						} else {
							//第四个tab 打开新窗口
							plus.webview.open('./html/tab-webview-subpage-contact.html', 'new', {}, 'slide-in-right', 200);
						}
					});			
					function getData(){
										mui.ajax('http://124.70.73.91:29/music/',{
											data:{
											},
											dataType:'json',//服务器返回json格式数据
											type:'get',//HTTP请求类型
											success:function(res){
												// const tags = parseTag(res.data, 'span'); // ['Hello']
												// const musicList = tags.filter(item => item !== "..")
												const musicList = (res+'').split(',').filter(item =>  item.endsWith('.mp3') )
												localStorage.setItem('allMusicName',musicList)
												renderTable(musicList)
											}
										});
						function	parseTag(str, tag){
										const regex = new RegExp(`<${tag} class="name">(.*?)</${tag}>`, 'gi');
										let match;
										const result = [];
										while (match = regex.exec(str)) {
											result.push(match[1]);
										}
										return result;
						}	
						function renderTable(tableList){
							console.log("执行了渲染方法" +tableList)
							var table = document.body.querySelector('.mui-table-view');
							table.innerHTML = ""
							for(let i=0;i<tableList.length;i++){
								let item = tableList[i]
								let li = document.createElement('li');
								li.setAttribute('id',item)
								li.className = 'mui-table-view-cell';
								li.innerHTML = '<a class="mui-navigate-right" >' + (i + 1) + '<span class="music-name">'+item+'</span></a>';
								table.append(li);
							}
						}			
					}
					function addDataEventListen(){
						mui(".mui-table-view").on('tap','.mui-table-view-cell',function(e){
						//获取id
						var id = this.getAttribute("id");
						//打开新闻详情
						localStorage.setItem('musicName',id)
						mui.openWindow({
							id:'tab-webview-subpage-contact',
							url:'html/tab-webview-subpage-contact.html',
						});
						}) 
					}
				});
			})();
		</script>
	</body>

</html>